<template>
    <el-container>
        <el-header style="padding: 0px;">
            <el-row>
                <el-col :span="4" ><div class="grid-content">
                    <el-input v-model="searchParam.planId">
                        <template slot="prepend">计划ID</template>
                    </el-input>

                </div></el-col>
                <el-col :span="3"><div class="grid-content">
                    <el-select v-model="searchParam.planType">
                        <el-option label="所有类型" value="0"></el-option>
                        <el-option label="cpc" value="cpc"></el-option>
                        <el-option label="cpa" value="cpa"></el-option>
                    </el-select>

                </div>
                </el-col>
                <el-col :span="3"><div class="grid-content">
                    <el-select v-model="searchParam.sort">
                        <el-option label="默认排序" value="0"></el-option>
                        <el-option label="日期" value="1"></el-option>
                        <el-option label="浏览量" value="2"></el-option>
                        <el-option label="结算量" value="3"></el-option>
                        <el-option label="CRT" value="4"></el-option>
                        <el-option label="Cpa转化率" value="5"></el-option>
                        <el-option label="应付金额" value="6"></el-option>
                        <el-option label="盈利" value="7"></el-option>

                    </el-select>
                </div></el-col>
                <el-col :span="8"><div class="grid-content">
                    <el-date-picker v-model="searchParam.date" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </div></el-col>
                <el-col :span="4"><div class="grid-content">
                    <el-button type="primary" icon="el-icon-search" v-on:click="search">查询</el-button>
                </div></el-col>

            </el-row>
        </el-header>
        <el-main style="padding: 0px;">
            <el-table
                    v-loading="loading"
                    stripe
                    ref="testTable"
                    :data="tableData"
                    size="small"
                    style="width:100%"
                    border
                    :summary-method="getSummaries"
                    show-summary
                    @selection-change="handleSelectionChange"
                    @row-click="handleclick"
                    :row-class-name = "tableRowClassName"
            >
                <!--<el-table-column  type="selection"></el-table-column>-->
                <el-table-column prop="planid" label="计划id" fixed="left"   sortable></el-table-column>
                <el-table-column prop="planname" label="计划名称" min-width="100px;"> </el-table-column>
                <el-table-column prop="plantype" label="类型"></el-table-column>
                <el-table-column prop="views" label="浏览数"   min-width="100px;"></el-table-column>
                <el-table-column prop="realviews" label="实际浏览数"  min-width="110px;"></el-table-column>
                <el-table-column prop="click" label="点击数"   min-width="100px;"></el-table-column>
                <el-table-column prop="deduction" label="扣量" ></el-table-column>
                <el-table-column prop="num" label="结算数" sortable min-width="100px;"></el-table-column>
                <el-table-column label="CRT">
                    <template slot-scope="scope">
                        {{ scope.row.crt}}%
                    </template>
                </el-table-column>
                <el-table-column label="Cpa转化">
                    <template slot-scope="scope">
                        {{ scope.row.cparate}}%
                    </template>
                </el-table-column>
                <el-table-column min-width="100px;" label="应付">
                    <template slot-scope="scope">
                        ￥{{ scope.row.sumadvpay}}
                    </template>
                </el-table-column>
                <el-table-column min-width="100px;" label="盈利">
                    <template slot-scope="scope">
                        ￥{{ scope.row.sumprofit}}
                    </template>
                </el-table-column>

                <el-table-column prop="day" label="日期" sortable min-width="100px;" fixed="right"></el-table-column>



            </el-table>

            <div align="center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>

        </el-main>

        <!--扇形图-->
        <el-container style="min-height: 300px">
            <!--手机品牌分布-->
            <el-main style="width: 50%">
                <phone-brand ref="c1"
                        :titleText="pie1.titleText"
                        :opinion="pie1.opinion"
                        :seriesName="pie1.seriesName"
                        :opinionData="pie1.opinionData"
                ></phone-brand>

            </el-main>
            <!--浏览器分布-->
            <el-main style="width: 50%">
                <browser-pie ref="c2"
                        :titleText="pie2.titleText"
                        :opinion="pie2.opinion"
                        :seriesName="pie2.seriesName"
                        :opinionData="pie2.opinionData"
                ></browser-pie>

            </el-main>

        </el-container>


        <el-container style="min-height: 300px">
            <el-main style="width: 50%">
                <!--扇形图ISP-->
                <ISPPie ref="c3"
                        :titleText="pie3.titleText"
                        :opinion="pie3.opinion"
                        :seriesName="pie3.seriesName"
                        :opinionData="pie3.opinionData"
                ></ISPPie>
            </el-main>

            <el-main style="width: 50%">
                <china-map ref="m1"
                           :titleText="map1.titleText"
                           :opinionData="map1.opinionData"
                ></china-map>

            </el-main>



        </el-container>

        <!--top指标-->
        <el-container style="min-height: 400px">
            <el-main style="width: 33%">
                <!--<siter-top ref="t1"
                             :titleText="bar1.titleText"
                             :opinion="bar1.opinion"
                             :seriesName="bar1.seriesName"
                             :opinionData="bar1.opinionData"
                ></siter-top>-->
                <plan-top ref="t1"
                          :titleText="bar1.titleText"
                          :opinion="bar1.opinion"
                          :seriesName="bar1.seriesName"
                          :opinionData="bar1.opinionData">

                </plan-top>

            </el-main>
            <el-main style="width: 33%">
                <plan-adv ref="t2"
                          :titleText="bar2.titleText"
                          :opinion="bar2.opinion"
                          :seriesName="bar2.seriesName"
                          :opinionData="bar2.opinionData">
                </plan-adv>
            </el-main>
            <el-main style="width: 33%">
                <plan-zone ref="t3"
                           :titleText="bar3.titleText"
                           :opinion="bar3.opinion"
                           :seriesName="bar3.seriesName"
                           :opinionData="bar3.opinionData">
                </plan-zone>
            </el-main>

        </el-container>

    </el-container>

</template>


<script>
    import mEcharts  from '../charts/Pie1';

    import phoneBrand  from './chart/PhoneBrandPie';
    import browserPie  from './chart/BrowserPie';
    import SiterTop from "./chart/siterTop";
    import ChinaMap from "./chart/chinaMap";
    import ISPPie from "./chart/ISPPie";
    import PlanTop from "./chart/planTop";
    import PlanAdv from "./chart/planAdv";
    import PlanZone from "./chart/planZone";

    export default {
        name: 'planChart',
        components: {
            PlanZone,
            PlanAdv,
            PlanTop,
            ISPPie,
            ChinaMap,
            SiterTop,
            mEcharts,phoneBrand,browserPie
        },
        data() {
            return {
                pie1:{
                    titleText:'手机品牌类型分布',
                    opinion:['苹果','小米','华为'],
                    seriesName:'手机品牌分布统计',
                    opinionData:[
                        {value:25, name:'苹果'},
                        {value:30, name:'小米'},
                        {value:12, name:'华为'}
                    ],
                },
                pie2:{
                    titleText:'浏览器分布',
                    opinion:['wechat','chrome','safari'],
                    seriesName:'浏览器分布统计',
                    opinionData:[
                        {value:5, name:'wechat'},
                        {value:3, name:'chrome'},
                        {value:1, name:'safari'}
                    ],
                },
                pie3:{
                    titleText:'ISP分布',
                    opinion:['wechat','chrome','safari'],
                    seriesName:'浏览器分布统计',
                    opinionData:[
                        {value:5, name:'wechat'},
                        {value:3, name:'chrome'},
                        {value:1, name:'safari'}
                    ],
                },
                bar1:{
                    titleText:'计划结算量top10',
                    opinion:[],
                    seriesName:'结算量',
                    opinionData:[],
                },
                bar2:{
                    titleText:'投放广告top10',
                    opinion:[],
                    seriesName:'结算量',
                    opinionData:[],
                },
                bar3:{
                    titleText:'广告位top10',
                    opinion:[],
                    seriesName:'结算量',
                    opinionData:[],
                },
                map1:{
                    titleText:'地域分布',
                    opinionData:[{name: '北京',value: 100 },{name: '天津',value: 200 },
                        {name: '上海',value: 300 },{name: '重庆',value: 4000 },
                        {name: '河北',value: 200 },{name: '河南',value: 600 },
                        {name: '云南',value: 2000},{name: '辽宁',value: 20 },
                        {name: '黑龙江',value: 20},{name: '湖南',value: 200 },
                        {name: '安徽',value: 2000 },{name: '山东',value: 2000 },
                        {name: '新疆',value: 7000 },{name: '江苏',value: 9000 },
                        {name: '浙江',value: 6000 },{name: '江西',value: 20000 },
                        {name: '湖北',value: 2000 },{name: '广西',value: 2000 },
                        {name: '甘肃',value: 2000 },{name: '山西',value: 20000 },
                        {name: '内蒙古',value: 2000 },{name: '陕西',value: 20000 },
                        {name: '吉林',value: 20000 },{name: '福建',value: 20000 },
                        {name: '贵州',value: 200 },{name: '广东',value: 20000 },
                        {name: '青海',value: 2000 },{name: '西藏',value: 2000 },
                        {name: '四川',value: 800 },{name: '宁夏',value: 200 },
                        {name: '海南',value: 400 },{name: '台湾',value: 2000 },
                        {name: '香港',value: 70 },{name: '澳门',value: 2100 }],
                },
                //表格当前页数据
                tableData: [],
                //多选数组
                multipleSelection: [],
                //下拉菜单选项
                select: '',
                //默认每页数据量
                pagesize: 10,
                //默认高亮行数据id
                highlightId: -1,
                //当前页码
                currentPage: 1,
                //查询的页码
                start: 1,
                //默认数据总数
                totalCount: 0,
                pickerOptions2: {
                    shortcuts: [{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//往前推一天
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '近14天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '近30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 181);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                searchParam: {
                    date: '',
                    sort: '0',
                    planType:'0',
                    planId:'',

                },
                huizong:{
                    views:'',
                    realViews:'',
                    clicks:'',
                    deduction:'',
                    num:'',
                    sumadvpay:'',//应付 /佣金注意修改
                    sumprofit:'',
                },
            }//return
        },//data
        methods: {
            //加载table数据
            loadData: function(planId,planType,sort,date, pageNum, pageSize){
                var params =new URLSearchParams();
                params.append("planId",planId);
                params.append("planType",planType);
                params.append("sort",sort);
                params.append("date",date);
                params.append("pageNum",pageNum);
                params.append("pageSize",pageSize);
                this.$axios.post('/home/count/getPlanListByPage',params).then((res)=> {
                    this.tableData = res.data.pagesdata;
                    this.totalCount = res.data.number;

                    this.huizong.views=res.data.sumPlanList[0].views;
                    this.huizong.realViews=res.data.sumPlanList[0].realviews;
                    this.huizong.clicks=res.data.sumPlanList[0].clicks;
                    this.huizong.deduction=res.data.sumPlanList[0].deduction;
                    this.huizong.num=res.data.sumPlanList[0].num;
                    this.huizong.sumadvpay=res.data.sumPlanList[0].sumadvpay;
                    this.huizong.sumprofit=res.data.sumPlanList[0].sumprofit;

                }).catch((error)=> {
                    console.log(error);
                });


            },

            //多选响应
            handleSelectionChange: function(val) {
                this.multipleSelection = val;
            },

            //点击行响应
            handleclick: function(row, event, column){
                this.highlightId = row.id;
            },

            //搜索
            search: function(){
                this.currentPage=1;
                this.loadData(this.searchParam.planId,this.searchParam.planType,this.searchParam.sort,this.searchParam.date, this.currentPage, this.pagesize);
                this.parentMethod();
            },


            //改变当前点击的行的class，高亮当前行
            tableRowClassName: function(row, index){
                if(row.id == this.highlightId)
                {
                    return 'info-row';
                }
            },

            //每页显示数据量变更
            handleSizeChange: function(val) {
                this.pagesize = val;
                this.loadData(this.searchParam.planId,this.searchParam.planType,this.searchParam.sort,this.searchParam.date, this.currentPage, this.pagesize);
            },

            //页码变更
            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadData(this.searchParam.planId,this.searchParam.planType,this.searchParam.sort,this.searchParam.date, this.currentPage, this.pagesize);
                },
            //父组件 调用子组件方法
            parentMethod() {
                //console.log(this.$refs.c1) //返回的是一个vue对象，所以可以直接调用其方法

                //1.获取数据2.重置数据3.调用子组件drawpie方法

                this.pie1.opinion=[];
                this.pie1.opinionData=[];
                this.pie2.opinion=[];
                this.pie2.opinionData=[];
                /*todo
                this.pie3.opinion=[];
                this.pie3.opinionData=[];*/

                this.bar1.opinion=[];
                this.bar1.opinionData=[];
                this.bar2.opinion=[];
                this.bar2.opinionData=[];
                this.bar3.opinion=[];
                this.bar3.opinionData=[];

                let params =new URLSearchParams();
                params.append("planType",this.searchParam.planType);
                params.append("date",this.searchParam.date);
                this.$axios.post('home/getPlanDatas',params).then((res)=> {
                    let phoneBrandList = res.data.phoneBrandList;
                    for(let i=0;i<phoneBrandList.length;i++){
                       // alert(phoneBrandList[i].name+"____ "+phoneBrandList[i].num);
                        this.pie1.opinion.push(phoneBrandList[i].name);
                        this.pie1.opinionData.push({"value":phoneBrandList[i].num,"name":phoneBrandList[i].name});
                    }
                    let browserList = res.data.browserList;
                    for(let i=0;i<browserList.length;i++){
                        this.pie2.opinion.push(browserList[i].name);
                        this.pie2.opinionData.push({"value":browserList[i].num,"name":browserList[i].name});
                    }

                    //isp饼状图
                    /*let ispList = res.data.ispList;
                    for(let i=0;i<ispList.length;i++){
                        this.pie3.opinion.push(ispList[i].name);
                        this.pie3.opinionData.push({"value":ispList[i].num,"name":ispList[i].name});
                    }*/


                    //计划结算量top10
                    let planList = res.data.planList;
                    for(let i=planList.length-1;i>=0;i--){
                        this.bar1.opinion.push(planList[i].name);
                        this.bar1.opinionData.push(planList[i].num);
                    }
                    //广告结算top10
                    let advList = res.data.advList;
                    for(let i=advList.length-1;i>=0;i--){
                        //this.bar2.opinion.push(advList[i].name);
                        this.bar2.opinion.push(advList[i].adsid);

                        this.bar2.opinionData.push(advList[i].num);
                    }
                    //广告位结算top10
                    let zoneList = res.data.zoneList;
                    for(let i=zoneList.length-1;i>=0;i--){
                        this.bar3.opinion.push(zoneList[i].name);
                        this.bar3.opinionData.push(zoneList[i].num);
                    }


                    this.$refs.c1.opinion=this.pie1.opinion;
                    this.$refs.c1.opinionData=this.pie1.opinionData;
                    this.$refs.c2.opinion=this.pie2.opinion;
                    this.$refs.c2.opinionData=this.pie2.opinionData;
                    this.$refs.c3.opinion=this.pie3.opinion;
                    this.$refs.c3.opinionData=this.pie3.opinionData;

                    this.$refs.t1.opinion=this.bar1.opinion;
                    this.$refs.t1.opinionData=this.bar1.opinionData;
                    this.$refs.t2.opinion=this.bar2.opinion;
                    this.$refs.t2.opinionData=this.bar2.opinionData;
                    this.$refs.t3.opinion=this.bar3.opinion;
                    this.$refs.t3.opinionData=this.bar3.opinionData;


                    this.$refs.c1.drawPie();//手机分布
                    this.$refs.c2.drawPie();//浏览器分布
                    this.$refs.c3.drawPie();

                    this.$refs.t1.drawPie();//计划结算量top10
                    this.$refs.t2.drawPie();//投放广告top10
                    this.$refs.t3.drawPie();//广告位top10

                }).catch((error)=> {
                    console.log(error);
                });




            },
            //汇总
            getSummaries(param) {
                const sums = [];
                sums[0] = '汇总';
                sums[3] = this.huizong.views;
                sums[4] = this.huizong.realViews;
                sums[5] = this.huizong.clicks;
                sums[6] =  this.huizong.deduction;
                sums[7] = this.huizong.num;
                sums[10] = '￥'+this.huizong.sumadvpay;
                sums[11] = '￥'+this.huizong.sumprofit;
                return sums;
            }

        },mounted(){
            this.loadData(this.searchParam.planId,this.searchParam.planType,this.searchParam.sort,this.searchParam.date, this.currentPage, this.pagesize);
            this.parentMethod();//父级调用子组件方法
        },
    };


</script>

